<template>
  <common-edit-dialog
    :title="`选择${title}-${
      multiple ? '多选（最多选择' + max + unit + '）' : '单选'
    }`"
    :visible.sync="dialogShow"
    @cancel="cancel"
    @submit="submitForm"
    :width="width"
  >
    <div class="choose-form">
      <!--tabs标签页-->
      <slot name="tabs"></slot>

      <div
        class="tabs-content"
        :style="{ height: $slots.tabs ? 'calc(100% - 39px)' : '100%' }"
      >
        <!--左侧树结构-->
        <div class="tree-wrap" v-if="$slots.tree">
          <slot name="tree"></slot>
        </div>

        <!--列表-->
        <div
          class="right-list-wrap"
          :style="{ width: $slots.tree ? 'calc(100% - 200px)' : '100%' }"
        >
          <div class="searchForm">
            <slot name="search"></slot>
          </div>
          <div class="buttonWrap">
            <slot name="button"></slot>
          </div>
          <div class="list">
            <slot name="content"></slot>
          </div>
          <div class="pagination">
            <slot name="pagination"></slot>
          </div>
        </div>
      </div>
    </div>
  </common-edit-dialog>
</template>

<script>
export default {
  name: "CommonChooseDialog",
  props: {
    title: {
      type: String,
      default: () => "人员",
    },
    multiple: {
      type: Boolean,
      default: () => false,
    },
    max: {
      type: Number,
      default: () => 10,
    },
    unit: {
      type: String,
      default: "人",
    },
    width: {
      type: String,
      default: "1100px",
    },
  },
  data() {
    return {
      dialogShow: false,
    };
  },
  methods: {
    show() {
      this.dialogShow = true;
    },
    cancel() {
      this.dialogShow = false;
    },
    submitForm() {
      this.$emit("submitForm");
    },
  },
};
</script>

<style scoped lang="scss">
.choose-form {
  height: 476px;

  .tabs-content {
    display: flex;
    height: 100%;
    /*height: calc(100% - 39px);*/

    .tree-wrap {
      width: 200px;
      height: 100%;
      border-right: 1px solid #eee;
      box-sizing: border-box;
      padding-top: 12px;
    }

    .right-list-wrap {
      padding: 12px 0 12px 12px;
      width: 100%;
      display: flex;
      flex-direction: column;

      .list {
        flex: 1;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
      }
    }
  }
}

::v-deep .global-common-edit-dialog-body {
  padding: 0 18px !important;
}
</style>
